<template>
  <div>
    <ul>
      <li v-for="item in arr" :key="item.id">{{ item.goods_name }}</li>
    </ul>
    <button v-for="(item, index) in count" :key="index" @click="fn(item)">
      {{ item }}
    </button><br>
	<span>请选择每页的数量（失焦后执行）默认为10</span>
    <select v-model="limit" @blur="fn1()">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="5">5</option>
      <option value="10">10</option>
    </select>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      arr: [],
      page: 1,
      limit: 10,
      count: [],
    };
  },
  mounted() {
    this.apply();
    this.apply1();
  },
  methods: {
    apply1() {
      axios({
        url: `https://liu.zzgoodqc.cn/goodsx/goodslist`,
        method: "get",
      })
        .then((a) => {
          this.count = [];
          for (
            let i = 1;
            i <= Math.ceil(a.data.data.length / this.limit);
            i++
          ) {
            this.count.push(i);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    apply() {
      axios({
        url: `https://liu.zzgoodqc.cn/goodsx/listByPage?page=${this.page}&limit=${this.limit}`,
        method: "get",
      })
        .then((a) => {
          this.arr = a.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    fn(page) {
      this.page = page;
      this.apply();
    },
    fn1() {
      this.apply1();
      this.apply();
    },
  },
};
</script>
<style lang='less' scoped>
</style>